<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>年度规划项目 - 学员端</title>
    <script src="https://res.gemcoder.com/js/reload.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <script>
      tailwind.config = {
                  theme: {
                      extend: {
                          colors: {
                              primary: '#165DFF',
                              secondary: '#4080FF',
                              accent: '#0E42D2',
                              neutral: '#F5F7FA',
                              'neutral-dark': '#E5E6EB',
                              'text-primary': '#1D2129',
                              'text-secondary': '#4E5969',
                              'text-tertiary': '#86909C',
                          },
                          fontFamily: {
                              inter: ['Inter', 'system-ui', 'sans-serif'],
                          },
                          spacing: {
                              '220': '220px',
                              '250': '250px',
                          }
                      },
                  }
              }
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
          .content-auto {
              content-visibility: auto;
          }
          .scrollbar-hide {
              -ms-overflow-style: none;
              scrollbar-width: none;
          }
          .scrollbar-hide::-webkit-scrollbar {
              display: none;
          }
          .menu-active {
              @apply bg-primary/10 text-primary border-l-4 border-primary;
          }
          .menu-item {
              @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
          }
          .menu-item-active {
              @apply bg-primary/10 text-primary border-l-4 border-primary;
          }
          .submenu-item {
              @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
          }
          .submenu-item-active {
              @apply bg-primary/10 text-primary;
          }
          .card-shadow {
              box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
          }
          .btn-primary {
              @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
          }
          .btn-secondary {
              @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
          }
          .btn-outline {
              @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
          }
          .input-field {
              @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
          }
          .table-header {
              @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
          }
          .table-row {
              @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
          }
          .badge {
              @apply px-2 py-1 rounded-full text-xs font-medium;
          }
          .badge-success {
              @apply bg-green-100 text-green-700;
          }
          .badge-warning {
              @apply bg-yellow-100 text-yellow-700;
          }
          .badge-danger {
              @apply bg-red-100 text-red-700;
          }
          .badge-info {
              @apply bg-blue-100 text-blue-700;
          }
          .badge-purple {
              @apply bg-purple-100 text-purple-700;
          }
      }
    </style>
  </head>
  <body
    class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"
  >
    <!-- 左侧菜单区域 -->
    <aside
      class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out"
      id="sidebar"
    >
      <!-- 品牌标识 -->
      <div
        class="flex items-center justify-center h-16 border-b border-neutral-dark"
      >
        <div class="flex items-center">
          <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i>
          <h1 class="text-xl font-bold text-primary">Hi Quick AI</h1>
        </div>
      </div>
      <!-- 菜单列表 -->
      <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide">
        <div class="menu-group">
         <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1181&amp;h=762&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
          <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-pe1s4" style="background-color:#ffffffff"> 
           <div class="flex items-center"> 
            <i class="fas fa-calendar-check text-lg mr-3"> </i> 
            <span class="" contenteditable="false" style="outline: none;"> 工作台 </span> 
           </div> 
          </div> </a> 
         <div class="submenu hidden" id="submenu-monthly"> 
         </div> 
        </div> 
        <!-- 公司公告 -->
        <div class="menu-group">
          <a
            class="yt-a-defalut-link menu-item flex justify-between"
            custom-a="true"
            custom-href="w=1170&h=728&appuuid=1969721745313103872&version=1&pageType=web&uuid=1968578812111224832&appName=年规学员端最新版1.1"
            href="javascript:void(0);"
            is-add="false"
            is-page="true"
            onclick="ytCustomLinkNavigation()"
            style="display: inline; padding: 0px; border: 0px; box-shadow: none;"
            target="_top"
          >
            <div
              class="menu-item flex justify-between"
              data-menu="announcements"
              data-selectorname="#id-efvjs"
              style
            >
              <div class="flex items-center">
                <i class="fas fa-bullhorn text-lg mr-3"> </i>
                <span> 公司公告 </span>
              </div>
            </div>
          </a>
          <div class="submenu hidden" id="submenu-announcements">
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1303&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967785482100146176&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="latest-announcements"
                data-selectorname="#id-1pjzg"
                style
              >
                <i class="fas fa-newspaper text-xs mr-2"> </i>
                <span> 最新公告 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1303&h=797&appuuid=1969721745313103872&version=2&pageType=web&uuid=1967783006529650688&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="historical-announcements"
                data-selectorname="#id-l2y31"
                style
              >
                <i class="fas fa-history text-xs mr-2"> </i>
                <span> 历史公告 </span>
              </div>
            </a>
          </div>
        </div>
        <!-- 年规管理 -->
        <div class="menu-group">
          <div
            class="menu-item menu-item-active flex justify-between"
            data-menu="planning"
          >
            <div class="flex items-center">
              <i class="fas fa-bullseye text-lg mr-3"> </i>
              <span> 年规管理 </span>
            </div>
            <i
              class="fas fa-chevron-down text-xs transition-transform duration-200"
            >
            </i>
          </div>
          <div
            class="submenu"
            id="submenu-planning"
            data-ytextravalue="extra-uywziy7qg"
          >
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1321&h=831&appuuid=1969721745313103872&version=2&pageType=web&uuid=1969787710210048000&appName=demo1"
              href="javascript:void(0);"
              is-add="false"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
              data-ytoriginindex="0"
              data-ytindex="0"
            >
              <div
                class="submenu-item"
                data-page="goal-dashboard"
                data-selectorname="#id-xuvyr"
                style
              >
                <i class="fas fa-chart-pie text-xs mr-2"> </i>
                <span> 目标进度看板 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1390&h=831&appuuid=1969721745313103872&version=1&pageType=web&uuid=1969803110087917568&appName=demo1"
              href="javascript:void(0);"
              is-add="false"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
              data-ytoriginindex="1"
              data-ytindex="1"
            >
              <div
                class="submenu-item"
                data-page="performance-entry"
                data-selectorname="#id-o6ys0"
                style
              >
                <i class="fas fa-pencil-alt text-xs mr-2"> </i>
                <span data-selectorname="span"> 业绩回填 </span>
              </div>
            </a>
            <div
              class="submenu-item submenu-item-active"
              data-page="product-library"
              data-ytoriginindex="2"
              data-ytindex="2"
            >
              <i class="fas fa-box text-xs mr-2"> </i>
              <span> 产品库 </span>
            </div>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1321&h=831&appuuid=1969721745313103872&version=1&pageType=web&uuid=1969766167933353984&appName=demo1"
              href="javascript:void(0);"
              is-add="false"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
              data-ytparentvalue="extra-uywziy7qg"
              data-ytoriginindex="3"
              data-ytindex="3"
            >
              <div
                class="submenu-item"
                data-page="marketing-plan"
                data-selectorname="#id-ngonp"
                style
              >
                <i class="fas fa-bullhorn text-xs mr-2"> </i>
                <span data-selectorname="span"> 营销计划 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967839529905684480&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
              data-ytoriginindex="4"
              data-ytindex="4"
            >
              <div
                class="submenu-item"
                data-page="customer-records"
                data-selectorname="#id-5cvpw"
                style
              >
                <i class="fas fa-users text-xs mr-2"> </i>
                <span data-selectorname="span"> 客户档案 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967841389332922368&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
              data-ytoriginindex="5"
              data-ytindex="5"
            >
              <div
                class="submenu-item"
                data-page="pk-activities"
                data-selectorname="#id-1d0gl"
                style
              >
                <i class="fas fa-trophy text-xs mr-2"> </i>
                <span data-selectorname="span" style> PK 活动 </span>
              </div>
            </a>
          </div>
        </div>
        <!-- 工作管理 -->
        <div class="menu-group">
          <div class="menu-item flex justify-between" data-menu="work">
            <div class="flex items-center">
              <i class="fas fa-briefcase text-lg mr-3"> </i>
              <span> 工作管理 </span>
            </div>
            <i
              class="fas fa-chevron-right text-xs transition-transform duration-200"
            >
            </i>
          </div>
          <div class="submenu hidden" id="submenu-work">
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967843857995399168&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="work-dashboard"
                data-selectorname="#id-yqgv6"
                style
                data-ytextravalue="extra-5p3ljae1z"
              >
                <i
                  class="fas fa-chart-bar text-xs mr-2"
                  data-ytoriginindex="0"
                  data-ytindex="0"
                >
                </i>
                <span
                  data-selectorname="span"
                  style
                  data-ytparentvalue="extra-5p3ljae1z"
                  data-ytoriginindex="1"
                  data-ytindex="1"
                >
                  周日报管理
                </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967850301578805248&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="meeting-plan"
                data-selectorname="#id-kxtky"
                style
              >
                <i class="fas fa-calendar-alt text-xs mr-2"> </i>
                <span data-selectorname="span"> 会议计划 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967852373321711616&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="work-tasks"
                data-selectorname="#id-pu1u5"
                style
              >
                <i class="fas fa-tasks text-xs mr-2"> </i>
                <span data-selectorname="span" style> 工作任务 </span>
              </div>
            </a>
          </div>
        </div>
        <!-- 学习成长 -->
        <div class="menu-group">
          <div class="menu-item flex justify-between" data-menu="learning">
            <div class="flex items-center">
              <i class="fas fa-graduation-cap text-lg mr-3"> </i>
              <span> 学习成长 </span>
            </div>
            <i
              class="fas fa-chevron-right text-xs transition-transform duration-200"
            >
            </i>
          </div>
          <div class="submenu hidden" id="submenu-learning">
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1113&h=728&appuuid=1969721745313103872&version=2&pageType=web&uuid=1968967895824203776&appName=年规学员端最新版1.1"
              href="javascript:void(0);"
              is-add="false"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="company-culture"
                data-selectorname="#id-ldh7y"
                style
              >
                <i class="fas fa-building text-xs mr-2"> </i>
                <span data-selectorname="span" style> 企业文化 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967868783729049600&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="course-center"
                data-selectorname="#id-04l2u"
                style
              >
                <i class="fas fa-book-open text-xs mr-2"> </i>
                <span data-selectorname="span"> 课程中心 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967868795963834368&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="knowledge-base"
                data-selectorname="#id-hptuq"
                style
              >
                <i class="fas fa-book text-xs mr-2"> </i>
                <span data-selectorname="span"> 知识库 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967868797977100288&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="learning-plan"
                data-selectorname="#id-ufugc"
                style
              >
                <i class="fas fa-clipboard-list text-xs mr-2"> </i>
                <span data-selectorname="span" style> 学习计划 </span>
              </div>
            </a>
          </div>
        </div>
        <!-- 个人档案 -->
        <div class="menu-group">
          <div class="menu-item flex justify-between" data-menu="profile">
            <div class="flex items-center">
              <i class="fas fa-user text-lg mr-3"> </i>
              <span> 个人档案 </span>
            </div>
            <i
              class="fas fa-chevron-right text-xs transition-transform duration-200"
            >
            </i>
          </div>
          <div class="submenu hidden" id="submenu-profile">
            <a
              class="yt-a-defalut-link submenu-item flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967868800292356096&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item"
                data-page="basic-info"
                data-selectorname="#id-6cyfz"
                style
              >
                <i class="fas fa-id-card text-xs mr-2"> </i>
                <span data-selectorname="span"> 基本信息 </span>
              </div>
            </a>
            <a
              class="yt-a-defalut-link submenu-item submenu-item-active flex"
              custom-a="true"
              custom-href="w=1228&h=797&appuuid=1969721745313103872&version=1&pageType=web&uuid=1967868801315766272&appName=年规学员端左侧菜单版"
              href="javascript:void(0);"
              is-add="true"
              is-page="true"
              onclick="ytCustomLinkNavigation()"
              style="display: flex; padding: 0px; border: 0px; box-shadow: none;"
              target="_top"
            >
              <div
                class="submenu-item submenu-item-active"
                data-page="account-settings"
                data-selectorname="#id-itxoz"
                style
              >
                <i class="fas fa-cog text-xs mr-2"> </i>
                <span data-selectorname="span"> 账号设置 </span>
              </div>
            </a>
          </div>
        </div>
      </nav>
    </aside>
    <!-- 右侧内容区域 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <header
        class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"
      >
        <div class="flex items-center">
          <button
            class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200"
            id="toggle-sidebar"
          >
            <i class="fas fa-bars text-xl"> </i>
          </button>
          <div class="text-sm text-text-tertiary" id="breadcrumb">
            <span> 年规管理 </span>
            <i class="fas fa-angle-right mx-2 text-xs"> </i>
            <span> 产品库 </span>
          </div>
        </div>
        <div class="flex items-center space-x-6">
          <div class="relative">
            <input
              class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"
              placeholder="搜索..."
              type="text"
            />
            <i
              class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"
            >
            </i>
          </div>
          <div class="relative">
            <button
              class="relative text-text-secondary hover:text-primary transition-colors duration-200"
            >
              <i class="fas fa-bell text-xl"> </i>
              <span
                class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"
              >
              </span>
            </button>
          </div>
          <div class="flex items-center cursor-pointer group">
            <img
              alt="用户头像"
              class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200"
              src="https://design.gemcoder.com/staticResource/echoAiSystemImages/f48e4ae6256cb09fa61d11486866b14f.png"
            />
            <div class="ml-2 hidden md:block">
              <div class="text-sm font-medium">张明</div>
              <div class="text-xs text-text-tertiary">销售部</div>
            </div>
            <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i>
          </div>
        </div>
      </header>
      <!-- 内容滚动区域 -->
      <div
        class="flex-1 overflow-y-auto p-6 bg-neutral"
        id="content-area"
        data-ytextravalue="extra-mzr8l02yk"
      >
        <!-- 产品库页面 -->
        <div
          class="page active"
          data-ytextravalue="extra-ek5857tjk"
          id="page-product-library"
          data-ytparentvalue="extra-mzr8l02yk"
          data-ytoriginindex="0"
          data-ytindex="0"
        >
          <div
            class="flex justify-between items-center mb-6"
            data-ytindex="0"
            data-ytoriginindex="0"
          >
            <h2 class="text-2xl font-bold">产品库</h2>
            <div class="flex space-x-3" data-ytextravalue="extra-itz2e8mlj">
              <div
                class="flex border border-neutral-dark rounded-lg overflow-hidden"
                data-ytextravalue="extra-jjn0vq98o"
                data-ytoriginindex="0"
                data-ytindex="0"
              >
                <div></div>
              </div>
            </div>
          </div>
          <!-- 产品搜索和筛选 -->
          <div
            class="bg-white rounded-lg card-shadow p-5 mb-6"
            data-ytextravalue="extra-s3cijwo9t"
            data-ytindex="1"
            data-ytoriginindex="2"
            data-ytparentvalue="extra-ek5857tjk"
            style="opacity: 1; color: rgb(29, 33, 41); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;"
          >
            <div
              class="grid grid-cols-12 gap-4"
              data-ytextravalue="extra-re3ds3stt"
              data-ytindex="0"
              data-ytoriginindex="0"
              data-ytparentvalue="extra-s3cijwo9t"
              style="opacity: 1; color: rgb(29, 33, 41); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;"
            >
              <div
                class="col-span-2"
                data-ytextravalue="extra-24g6mndwv"
                data-ytindex="0"
                data-ytoriginindex="0"
                data-ytparentvalue="extra-re3ds3stt"
                style="opacity: 1;"
              >
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  data-ytindex="0"
                  data-ytoriginindex="0"
                  data-ytparentvalue="extra-24g6mndwv"
                  style="opacity: 1; color: rgb(78, 89, 105); font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 500; font-style: normal; line-height: 20px; text-align: start; text-indent: 0px;"
                >
                  产品名称
                </label>
                <input
                  class="input-field"
                  data-ytindex="1"
                  data-ytoriginindex="1"
                  placeholder="请输入产品名称"
                  style
                  type="text"
                />
              </div>
              <div
                class="col-span-2"
                data-ytindex="1"
                data-ytoriginindex="1"
                style
              >
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品分类
                </label>
                <select class="input-field" style>
                  <option value>全部分类</option>
                  <option value="software">软件产品</option>
                  <option value="hardware">硬件设备</option>
                  <option value="service">服务套餐</option>
                </select>
              </div>
              <div
                class="col-span-2"
                data-ytindex="2"
                data-ytoriginindex="2"
                style
              >
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品类型
                </label>
                <select class="input-field" style>
                  <option value>全部类型</option>
                  <option value="subscription">订阅制</option>
                  <option value="one-time">一次性购买</option>
                  <option value="service">服务+订阅</option>
                  <option value="project">项目制</option>
                </select>
              </div>
              <div
                class="col-span-2"
                data-ytindex="3"
                data-ytoriginindex="3"
                style
              >
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  销售地区
                </label>
                <select class="input-field" style>
                  <option value>全部地区</option>
                  <option value="national">全国</option>
                  <option value="east-south">华东,华南</option>
                  <option value="north-west">华北,西北</option>
                </select>
              </div>
              <div
                class="col-span-2"
                data-ytindex="4"
                data-ytoriginindex="4"
                style
              >
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  目标市场
                </label>
                <select class="input-field" style>
                  <option value>全部市场</option>
                  <option value="large-enterprise">大型企业</option>
                  <option value="medium-enterprise">中型企业</option>
                  <option value="small-enterprise">小型企业</option>
                  <option value="startup">初创企业</option>
                </select>
              </div>
              <div
                class="col-span-2"
                data-ytindex="5"
                data-ytoriginindex="5"
                style
              >
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品状态
                </label>
                <select class="input-field" style>
                  <option value>全部状态</option>
                  <option value="on-sale">在售</option>
                  <option value="discontinued">停售</option>
                </select>
              </div>
              <div
                class="col-span-2 flex items-end"
                data-ytextravalue="extra-15y9sdg7x"
                data-ytindex="6"
                data-ytoriginindex="5"
                data-ytparentvalue="extra-re3ds3stt"
                style="opacity: 1; color: rgb(29, 33, 41); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;"
              >
                <div class="flex space-x-3 w-full">
                  <button
                    class="btn-secondary w-full"
                    data-ytindex="0"
                    data-ytoriginindex="0"
                    data-ytparentvalue="extra-15y9sdg7x"
                    style="opacity: 1;"
                  >
                    重置
                  </button>
                  <button
                    class="btn-primary w-full"
                    data-ytindex="1"
                    data-ytoriginindex="1"
                    data-ytparentvalue="extra-15y9sdg7x"
                    style="opacity: 1;"
                  >
                    搜索
                  </button>
                </div>
              </div>
            </div>
          </div>
          <button
            class="btn-primary"
            id="add-product-btn"
            data-ytparentvalue="extra-itz2e8mlj"
            data-ytoriginindex="1"
            data-ytindex="1"
            style="opacity: 1; color: rgb(255, 255, 255); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: center; text-indent: 0px;left:2.81px;position:relative;top:-10px"
          >
            <i class="fas fa-plus mr-2" style> </i>
            添加产品
          </button>
          <!-- 产品统计卡片 -->
          <div
            class="grid grid-cols-12 gap-6 mb-6"
            data-ytindex="3"
            data-ytoriginindex="1"
            data-ytextravalue="extra-g3uijqm2m"
          >
            <div
              class="col-span-3 bg-white rounded-lg card-shadow p-5"
              data-ytoriginindex="0"
              data-ytindex="0"
              style
            >
              <div class="text-text-tertiary text-sm mb-2">总产品数量</div>
              <div class="flex items-end justify-between mb-4">
                <div>
                  <span class="text-3xl font-bold"> 28 </span>
                  <span class="text-green-500 text-sm ml-2">
                    <i class="fas fa-arrow-up"> </i>
                    4
                  </span>
                </div>
                <div class="text-text-tertiary text-sm">本月新增</div>
              </div>
              <div class="flex items-center text-sm text-primary mt-2">
                <i class="fas fa-info-circle mr-1"> </i>
                <span> 查看产品分类 </span>
              </div>
            </div>
            <div
              class="col-span-3 bg-white rounded-lg card-shadow p-5"
              data-ytoriginindex="1"
              data-ytindex="1"
            >
              <div class="text-text-tertiary text-sm mb-2">新增产品</div>
              <div class="flex items-end justify-between mb-4">
                <div>
                  <span class="text-3xl font-bold"> 12 </span>
                  <span class="text-green-500 text-sm ml-2">
                    <i class="fas fa-arrow-up"> </i>
                    2
                  </span>
                </div>
                <div class="text-text-tertiary text-sm">本月新增</div>
              </div>
              <div class="flex items-center text-sm text-primary mt-2">
                <i class="fas fa-info-circle mr-1"> </i>
                <span> 查看产品列表 </span>
              </div>
            </div>
            <div
              class="col-span-3 bg-white rounded-lg card-shadow p-5"
              data-ytparentvalue="extra-g3uijqm2m"
              data-ytoriginindex="2"
              data-ytindex="2"
              style="opacity: 1;"
            >
              <div class="text-text-tertiary text-sm mb-2" style>
                热门销售产品
              </div>
              <div class="flex items-end justify-between mb-4">
                <div style>
                  <span class="text-xl font-bold" style> 企业版软件套餐 </span>
                  <span class="text-green-500 text-sm ml-2">
                    <i class="fas fa-arrow-up"> </i>
                    12.5%
                  </span>
                </div>
                <div class="text-text-tertiary text-sm" style>本月销量</div>
              </div>
              <div class="flex items-center text-sm text-primary mt-2">
                <i class="fas fa-info-circle mr-1"> </i>
                <span> 查看销售排行 </span>
              </div>
            </div>
          </div>
          <!-- 产品列表表格 -->
          <div
            class="bg-white rounded-lg card-shadow overflow-hidden mb-6"
            data-ytindex="4"
            data-ytoriginindex="3"
          >
            <div class="overflow-x-auto">
              <table class="w-full">
                <thead>
                  <tr>
                    <th class="table-header text-left w-12">
                      <input
                        class="rounded text-primary focus:ring-primary"
                        type="checkbox"
                      />
                    </th>
                    <th class="table-header text-left">产品分类</th>
                    <th class="table-header text-left">产品图片</th>
                    <th class="table-header text-left">产品名称</th>
                    <th class="table-header text-left">产品类型</th>
                    <th class="table-header text-left">销售地区</th>
                    <th class="table-header text-left">目标市场</th>
                    <th class="table-header text-left">产品标签</th>
                    <th class="table-header text-left">产品状态</th>
                    <th class="table-header text-left">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    class="table-row"
                    data-product-id="1"
                    data-product-name="企业版软件套餐"
                    data-product-category="软件产品"
                    data-product-type="订阅制"
                    data-product-price="19800"
                  >
                    <td class="px-4 py-4">
                      <input
                        class="rounded text-primary focus:ring-primary"
                        type="checkbox"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <span> 软件产品 </span>
                    </td>
                    <td class="px-4 py-4">
                      <img
                        alt="企业版软件套餐"
                        class="w-16 h-16 object-cover rounded-md"
                        src="https://design.gemcoder.com/staticResource/echoAiSystemImages/c1bd9e14995732c67e0ce20a485c2909.png"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <div class="font-medium">企业版软件套餐</div>
                      <div class="text-sm text-text-secondary">
                        产品编号: PRO-2023001
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span> 订阅制 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 全国 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 中大型企业 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-1">
                        <span class="badge badge-success"> 热门 </span>
                        <span class="badge badge-info"> 新品 </span>
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span class="badge badge-success"> 在售 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-2">
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 preview-product"
                          title="查看详情"
                          data-product-id="1"
                        >
                          <i class="fas fa-eye"> </i>
                        </button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200"
                          title="编辑"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 contact-supplier"
                          title="联系供应商"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-red-500 transition-colors duration-200"
                          title="删除"
                        ></button>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="table-row"
                    data-product-id="2"
                    data-product-name="高级硬件设备"
                    data-product-category="硬件设备"
                    data-product-type="一次性购买"
                    data-product-price="29999"
                  >
                    <td class="px-4 py-4">
                      <input
                        class="rounded text-primary focus:ring-primary"
                        type="checkbox"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <span> 硬件设备 </span>
                    </td>
                    <td class="px-4 py-4">
                      <img
                        alt="高级硬件设备"
                        class="w-16 h-16 object-cover rounded-md"
                        src="https://design.gemcoder.com/staticResource/echoAiSystemImages/71882e68e7d5e549c9b21d009f8a962b.png"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <div class="font-medium">高级硬件设备</div>
                      <div class="text-sm text-text-secondary">
                        产品编号: PRO-2023002
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span> 一次性购买 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 华东,华南 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 中小企业 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-1">
                        <span class="badge badge-warning"> 促销 </span>
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span class="badge badge-success"> 在售 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-2">
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 preview-product"
                          title="查看详情"
                          data-product-id="2"
                        >
                          <i class="fas fa-eye"> </i>
                        </button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200"
                          title="编辑"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-red-500 transition-colors duration-200"
                          title="删除"
                          data-ytextravalue="extra-vqx0enmjw"
                        ></button>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="table-row"
                    data-product-id="3"
                    data-product-name="基础版软件+服务"
                    data-product-category="服务套餐"
                    data-product-type="服务+订阅"
                    data-product-price="9800"
                  >
                    <td class="px-4 py-4">
                      <input
                        class="rounded text-primary focus:ring-primary"
                        type="checkbox"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <span> 服务套餐 </span>
                    </td>
                    <td class="px-4 py-4">
                      <img
                        alt="基础版软件+服务"
                        class="w-16 h-16 object-cover rounded-md"
                        src="https://design.gemcoder.com/staticResource/echoAiSystemImages/bc95d49a2f7036fdb0c46a7f03cf2152.png"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <div class="font-medium">基础版软件+服务</div>
                      <div class="text-sm text-text-secondary">
                        产品编号: PRO-2023003
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span> 服务+订阅 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 华北,西北 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 初创企业 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-1">
                        <span class="badge badge-info"> 入门 </span>
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span class="badge badge-success"> 在售 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-2">
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 preview-product"
                          title="查看详情"
                          data-product-id="3"
                        >
                          <i class="fas fa-eye"> </i>
                        </button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200"
                          title="编辑"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 contact-supplier"
                          title="联系供应商"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-red-500 transition-colors duration-200"
                          title="删除"
                          data-ytextravalue="extra-7jq1elqxv"
                        ></button>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="table-row"
                    data-product-id="4"
                    data-product-name="定制开发服务"
                    data-product-category="服务套餐"
                    data-product-type="项目制"
                    data-product-price="50000"
                  >
                    <td class="px-4 py-4">
                      <input
                        class="rounded text-primary focus:ring-primary"
                        type="checkbox"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <span> 服务套餐 </span>
                    </td>
                    <td class="px-4 py-4">
                      <img
                        alt="定制开发服务"
                        class="w-16 h-16 object-cover rounded-md"
                        src="https://design.gemcoder.com/staticResource/echoAiSystemImages/02dae74af5849f5c446eaea6d2693d14.png"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <div class="font-medium">定制开发服务</div>
                      <div class="text-sm text-text-secondary">
                        产品编号: PRO-2023004
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span> 项目制 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 全国 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 大型企业 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-1">
                        <span class="badge badge-purple"> 定制 </span>
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span class="badge badge-success"> 在售 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-2">
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 preview-product"
                          title="查看详情"
                          data-product-id="4"
                        >
                          <i class="fas fa-eye"> </i>
                        </button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200"
                          title="编辑"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 contact-supplier"
                          title="联系供应商"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-red-500 transition-colors duration-200"
                          title="删除"
                        ></button>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="table-row"
                    data-product-id="5"
                    data-product-name="高级硬件设备Pro"
                    data-product-category="硬件设备"
                    data-product-type="一次性购买"
                    data-product-price="39999"
                  >
                    <td class="px-4 py-4">
                      <input
                        class="rounded text-primary focus:ring-primary"
                        type="checkbox"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <span> 硬件设备 </span>
                    </td>
                    <td class="px-4 py-4">
                      <img
                        alt="高级硬件设备Pro"
                        class="w-16 h-16 object-cover rounded-md"
                        src="https://design.gemcoder.com/staticResource/echoAiSystemImages/b6cd00a9fe6c1d1dfbf9c9b5c5c9f8d1.png"
                      />
                    </td>
                    <td class="px-4 py-4">
                      <div class="font-medium">高级硬件设备Pro</div>
                      <div class="text-sm text-text-secondary">
                        产品编号: PRO-2023005
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span> 一次性购买 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 全国 </span>
                    </td>
                    <td class="px-4 py-4">
                      <span> 高端客户 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div class="flex space-x-1">
                        <span class="badge badge-success"> 热门 </span>
                        <span class="badge badge-purple"> 高端 </span>
                      </div>
                    </td>
                    <td class="px-4 py-4">
                      <span class="badge badge-danger"> 停售 </span>
                    </td>
                    <td class="px-4 py-4">
                      <div
                        class="flex space-x-2"
                        data-ytextravalue="extra-u0gusbvq7"
                      >
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 preview-product"
                          title="查看详情"
                          data-product-id="5"
                          data-ytoriginindex="0"
                          data-ytindex="0"
                        >
                          <i class="fas fa-eye"> </i>
                        </button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200"
                          title="编辑"
                          data-ytoriginindex="1"
                          data-ytindex="1"
                        ></button>
                        <button
                          class="text-text-secondary hover:text-primary transition-colors duration-200 contact-supplier"
                          title="联系供应商"
                          data-ytoriginindex="2"
                          data-ytindex="2"
                          data-ytextravalue="extra-vvuz4e8ef"
                        ></button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="p-5 border-t border-neutral-dark flex justify-between items-center"
            >
              <div class="text-sm text-text-tertiary">
                显示 1 至 5 条，共 28 条
              </div>
              <div class="flex space-x-1">
                <button
                  class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:border-primary hover:text-primary transition-colors duration-200"
                  disabled
                >
                  <i class="fas fa-chevron-left text-xs"> </i>
                </button>
                <button
                  class="w-9 h-9 flex items-center justify-center rounded bg-primary text-white"
                >
                  1
                </button>
                <button
                  class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"
                >
                  2
                </button>
                <button
                  class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"
                >
                  3
                </button>
                <button
                  class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"
                >
                  4
                </button>
                <button
                  class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"
                >
                  5
                </button>
                <button
                  class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark hover:border-primary hover:text-primary transition-colors duration-200"
                >
                  <i class="fas fa-chevron-right text-xs"> </i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- 其他页面内容保持不变 -->
        <div
          class="page hidden"
          id="page-monthly-tasks"
          data-ytoriginindex="1"
          data-ytindex="1"
        ></div>
        <div
          class="page hidden"
          id="page-latest-announcements"
          data-ytoriginindex="2"
          data-ytindex="2"
        ></div>
        <div
          class="page hidden"
          id="page-historical-announcements"
          data-ytoriginindex="3"
          data-ytindex="3"
        ></div>
        <div
          class="page hidden"
          id="page-goal-dashboard"
          data-ytoriginindex="4"
          data-ytindex="4"
        ></div>
        <div
          class="page hidden"
          id="page-performance-entry"
          data-ytoriginindex="5"
          data-ytindex="5"
        ></div>
      </div>
    </main>
    <!-- 产品详情抽屉弹窗 -->
    <div
      class="fixed inset-y-0 right-0 w-full max-w-3xl bg-white shadow-xl z-50 transform translate-x-full transition-transform duration-300 ease-in-out"
      id="product-detail-drawer"
    >
      <div class="flex flex-col h-full">
        <!-- 抽屉头部 -->
        <div
          class="h-16 border-b border-neutral-dark flex items-center justify-between px-6 sticky top-0 bg-white z-10"
        >
          <h3 class="text-lg font-semibold" id="drawer-product-title">
            产品详情
          </h3>
          <div class="flex items-center space-x-4">
            <button
              class="text-text-secondary hover:text-primary transition-colors duration-200"
              title="编辑产品"
            ></button>
            <button
              class="text-text-secondary hover:text-red-500 transition-colors duration-200"
              title="关闭"
            >
              <i class="fas fa-times text-xl" id="close-drawer-btn"> </i>
            </button>
          </div>
        </div>
        <!-- 抽屉内容区域 -->
        <div class="flex-1 overflow-y-auto p-6" id="drawer-content">
          <div class="grid grid-cols-12 gap-6 mb-8">
            <!-- 产品图片 -->
            <div class="col-span-5">
              <div class="bg-neutral rounded-lg overflow-hidden h-64 mb-4">
                <img
                  id="drawer-product-image"
                  alt="产品图片"
                  class="w-full h-full object-cover"
                  src="https://design.gemcoder.com/staticResource/echoAiSystemImages/d296f7255f201a7164fe84c05e6e0a59.png"
                />
              </div>
              <div class="grid grid-cols-4 gap-2">
                <div
                  class="bg-neutral rounded-md overflow-hidden h-16 cursor-pointer border-2 border-primary"
                >
                  <img
                    alt="产品缩略图"
                    class="w-full h-full object-cover"
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/07d0354b39535b3b50150bb1d4fbbf23.png"
                  />
                </div>
                <div
                  class="bg-neutral rounded-md overflow-hidden h-16 cursor-pointer hover:border-2 hover:border-primary transition-colors duration-200"
                >
                  <img
                    alt="产品缩略图"
                    class="w-full h-full object-cover"
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/aca06a009bd97448c5816c911fefc8b7.png"
                  />
                </div>
                <div
                  class="bg-neutral rounded-md overflow-hidden h-16 cursor-pointer hover:border-2 hover:border-primary transition-colors duration-200"
                >
                  <img
                    alt="产品缩略图"
                    class="w-full h-full object-cover"
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/976e4d31729d89fca0914fd8c0746bb0.png"
                  />
                </div>
                <div
                  class="bg-neutral rounded-md overflow-hidden h-16 cursor-pointer hover:border-2 hover:border-primary transition-colors duration-200"
                >
                  <img
                    alt="产品缩略图"
                    class="w-full h-full object-cover"
                    src="https://design.gemcoder.com/staticResource/echoAiSystemImages/e5eea6892869569984a53190f9ec4831.png"
                  />
                </div>
              </div>
            </div>
            <!-- 产品基本信息 -->
            <div class="col-span-7">
              <div class="flex items-center mb-2">
                <span
                  id="drawer-product-category"
                  class="badge badge-info mr-2"
                >
                  软件产品
                </span>
                <span id="drawer-product-tag" class="badge badge-success">
                  热门
                </span>
              </div>
              <h2 id="drawer-product-name" class="text-2xl font-bold mb-2">
                企业版软件套餐
              </h2>
              <div
                class="text-text-secondary text-sm mb-4"
                id="drawer-product-code"
              >
                产品编号: PRO-2023001
              </div>
              <div class="mb-6">
                <div class="flex items-baseline mb-2">
                  <span
                    id="drawer-product-price"
                    class="text-3xl font-bold text-primary"
                  >
                    ¥19,800
                  </span>
                  <span class="text-text-secondary line-through ml-2 text-sm">
                    ¥22,800
                  </span>
                  <span class="badge badge-danger ml-2"> 限时优惠 </span>
                </div>
                <div class="text-green-500 text-sm flex items-center">
                  <i class="fas fa-arrow-down mr-1"> </i>
                  <span> 已优惠 ¥3,000 </span>
                </div>
              </div>
              <div class="grid grid-cols-2 gap-4 mb-6">
                <div>
                  <div class="text-text-tertiary text-sm mb-1">产品类型</div>
                  <div id="drawer-product-type" class="font-medium">订阅制</div>
                </div>
                <div>
                  <div class="text-text-tertiary text-sm mb-1">销售地区</div>
                  <div id="drawer-product-region" class="font-medium">全国</div>
                </div>
                <div>
                  <div class="text-text-tertiary text-sm mb-1">目标市场</div>
                  <div id="drawer-product-market" class="font-medium">
                    中大型企业
                  </div>
                </div>
                <div>
                  <div class="text-text-tertiary text-sm mb-1">产品状态</div>
                  <div>
                    <span
                      class="badge badge-success"
                      id="drawer-product-status"
                    >
                      在售
                    </span>
                  </div>
                </div>
              </div>
              <div class="flex space-x-3 mb-6">
                <button class="btn-primary flex-1">
                  <i class="fas fa-shopping-cart mr-2"> </i>
                  加入报价单
                </button>
              </div>
              <div class="bg-neutral/50 rounded-lg p-4">
                <div class="flex items-start mb-2">
                  <i class="fas fa-info-circle text-primary mt-0.5 mr-2"> </i>
                  <div class="text-sm text-text-secondary">
                    <p>订阅制产品支持按月或按年付费，年付可享受8折优惠</p>
                    <p class="mt-1">产品包含标准实施服务和7×12小时技术支持</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 产品详情标签页 -->
          <div class="border-b border-neutral-dark mb-6">
            <div
              class="flex space-x-8"
              id="detail-tabs"
              data-ytextravalue="extra-t91bk8tyx"
            >
              <button
                class="detail-tab active py-4 border-b-2 border-primary text-primary font-medium"
                data-tab="description"
                data-ytoriginindex="0"
                data-ytindex="0"
              >
                产品描述
              </button>
              <button
                class="detail-tab py-4 border-b-2 border-transparent text-text-secondary hover:text-primary transition-colors duration-200"
                data-tab="specification"
                data-ytoriginindex="1"
                data-ytindex="1"
              >
                规格参数
              </button>
              <button
                class="detail-tab py-4 border-b-2 border-transparent text-text-secondary hover:text-primary transition-colors duration-200"
                data-tab="documents"
                data-ytoriginindex="3"
                data-ytindex="3"
              >
                相关文档
              </button>
            </div>
          </div>
          <!-- 产品描述 -->
          <div class="detail-content active" id="tab-description">
            <h4 class="text-lg font-semibold mb-3">产品概述</h4>
            <p class="text-text-secondary mb-6 leading-relaxed">
              企业版软件套餐是一款专为中大型企业打造的全方位解决方案，集成了项目管理、客户关系管理、数据分析和团队协作等核心功能。该产品采用模块化设计，可根据企业实际需求灵活配置，帮助企业实现数字化转型，提升运营效率和管理水平。
            </p>
            <h4 class="text-lg font-semibold mb-3">核心功能</h4>
            <div class="grid grid-cols-2 gap-4 mb-6">
              <div class="flex items-start">
                <div
                  class="bg-primary/10 p-2 rounded-full text-primary mr-3 mt-1"
                >
                  <i class="fas fa-tasks"> </i>
                </div>
                <div>
                  <h5 class="font-medium mb-1">项目管理</h5>
                  <p class="text-sm text-text-secondary">
                    任务分配、进度跟踪、资源管理、甘特图可视化
                  </p>
                </div>
              </div>
              <div class="flex items-start">
                <div
                  class="bg-primary/10 p-2 rounded-full text-primary mr-3 mt-1"
                >
                  <i class="fas fa-users"> </i>
                </div>
                <div>
                  <h5 class="font-medium mb-1">客户关系管理</h5>
                  <p class="text-sm text-text-secondary">
                    客户资料管理、销售漏斗、跟进记录、合同管理
                  </p>
                </div>
              </div>
              <div class="flex items-start">
                <div
                  class="bg-primary/10 p-2 rounded-full text-primary mr-3 mt-1"
                >
                  <i class="fas fa-chart-line"> </i>
                </div>
                <div>
                  <h5 class="font-medium mb-1">数据分析</h5>
                  <p class="text-sm text-text-secondary">
                    自定义报表、数据可视化、趋势分析、预测模型
                  </p>
                </div>
              </div>
              <div class="flex items-start">
                <div
                  class="bg-primary/10 p-2 rounded-full text-primary mr-3 mt-1"
                >
                  <i class="fas fa-comments"> </i>
                </div>
                <div>
                  <h5 class="font-medium mb-1">团队协作</h5>
                  <p class="text-sm text-text-secondary">
                    实时通讯、文件共享、在线会议、协作编辑
                  </p>
                </div>
              </div>
            </div>
            <h4 class="text-lg font-semibold mb-3">系统要求</h4>
            <div class="grid grid-cols-3 gap-4 mb-6 text-sm">
              <div>
                <div class="text-text-tertiary mb-1">操作系统</div>
                <div class="text-text-primary">
                  Windows Server 2016+ / Linux CentOS 7+
                </div>
              </div>
              <div>
                <div class="text-text-tertiary mb-1">数据库</div>
                <div class="text-text-primary">MySQL 5.7+ / PostgreSQL 10+</div>
              </div>
              <div>
                <div class="text-text-tertiary mb-1">浏览器支持</div>
                <div class="text-text-primary">
                  Chrome 80+, Firefox 75+, Edge 80+
                </div>
              </div>
            </div>
          </div>
          <!-- 规格参数 -->
          <div class="detail-content hidden" id="tab-specification">
            <div class="overflow-x-auto">
              <table
                class="w-full border border-neutral-dark rounded-lg overflow-hidden"
              >
                <tbody>
                  <tr class="border-b border-neutral-dark bg-neutral">
                    <td class="px-4 py-3 font-medium w-1/3">产品型号</td>
                    <td class="px-4 py-3">ENT-2023-V2.5</td>
                  </tr>
                  <tr class="border-b border-neutral-dark">
                    <td class="px-4 py-3 font-medium">授权用户数</td>
                    <td class="px-4 py-3">不限用户</td>
                  </tr>
                  <tr class="border-b border-neutral-dark bg-neutral/50">
                    <td class="px-4 py-3 font-medium">数据存储</td>
                    <td class="px-4 py-3">500GB（可扩展）</td>
                  </tr>
                  <tr class="border-b border-neutral-dark">
                    <td class="px-4 py-3 font-medium">API接口</td>
                    <td class="px-4 py-3">
                      支持RESTful API，提供完整接口文档
                      <!-- <td class='px-4 py-3' -->
                      开放API，支持第三方系统集成
                    </td>
                  </tr>
                  <tr class="border-b border-neutral-dark bg-neutral/50">
                    <td class="px-4 py-3 font-medium">部署方式</td>
                    <td class="px-4 py-3">云端部署 / 本地部署</td>
                  </tr>
                  <tr class="border-b border-neutral-dark">
                    <td class="px-4 py-3 font-medium">更新频率</td>
                    <td class="px-4 py-3">每月小更新，每季度大版本更新</td>
                  </tr>
                  <tr class="border-b border-neutral-dark bg-neutral/50">
                    <td class="px-4 py-3 font-medium">服务支持</td>
                    <td class="px-4 py-3">7×12小时技术支持，5×8小时实施服务</td>
                  </tr>
                  <tr>
                    <td class="px-4 py-3 font-medium">安全认证</td>
                    <td class="px-4 py-3">
                      ISO27001信息安全认证，数据加密传输
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 供应商信息 -->
          <div class="detail-content hidden" id="tab-supplier"></div>
          <!-- 相关文档 -->
          <div class="detail-content hidden" id="tab-documents">
            <div class="space-y-4">
              <div
                class="bg-white rounded-lg card-shadow p-4 flex items-center justify-between hover:bg-neutral/50 transition-colors duration-200 cursor-pointer"
              >
                <div class="flex items-center">
                  <div
                    class="w-10 h-10 rounded bg-blue-100 flex items-center justify-center text-blue-500 mr-4"
                  >
                    <i class="fas fa-file-pdf text-xl"> </i>
                  </div>
                  <div>
                    <div class="font-medium">企业版软件套餐产品手册.pdf</div>
                    <div class="text-sm text-text-secondary">
                      2.4MB · 2023-06-15
                    </div>
                  </div>
                </div>
                <button
                  class="text-text-secondary hover:text-primary transition-colors duration-200"
                >
                  <i class="fas fa-download text-xl"> </i>
                </button>
              </div>
              <div
                class="bg-white rounded-lg card-shadow p-4 flex items-center justify-between hover:bg-neutral/50 transition-colors duration-200 cursor-pointer"
              >
                <div class="flex items-center">
                  <div
                    class="w-10 h-10 rounded bg-green-100 flex items-center justify-center text-green-500 mr-4"
                  >
                    <i class="fas fa-file-word text-xl"> </i>
                  </div>
                  <div>
                    <div class="font-medium">软件功能清单及技术参数.docx</div>
                    <div class="text-sm text-text-secondary">
                      1.2MB · 2023-05-28
                    </div>
                  </div>
                </div>
                <button
                  class="text-text-secondary hover:text-primary transition-colors duration-200"
                >
                  <i class="fas fa-download text-xl"> </i>
                </button>
              </div>
              <div
                class="bg-white rounded-lg card-shadow p-4 flex items-center justify-between hover:bg-neutral/50 transition-colors duration-200 cursor-pointer"
              >
                <div class="flex items-center">
                  <div
                    class="w-10 h-10 rounded bg-orange-100 flex items-center justify-center text-orange-500 mr-4"
                  >
                    <i class="fas fa-file-powerpoint text-xl"> </i>
                  </div>
                  <div>
                    <div class="font-medium">产品演示PPT.pptx</div>
                    <div class="text-sm text-text-secondary">
                      5.8MB · 2023-06-02
                    </div>
                  </div>
                </div>
                <button
                  class="text-text-secondary hover:text-primary transition-colors duration-200"
                >
                  <i class="fas fa-download text-xl"> </i>
                </button>
              </div>
              <div
                class="bg-white rounded-lg card-shadow p-4 flex items-center justify-between hover:bg-neutral/50 transition-colors duration-200 cursor-pointer"
              >
                <div class="flex items-center">
                  <div
                    class="w-10 h-10 rounded bg-purple-100 flex items-center justify-center text-purple-500 mr-4"
                  >
                    <i class="fas fa-file-excel text-xl"> </i>
                  </div>
                  <div>
                    <div class="font-medium">产品报价单模板.xlsx</div>
                    <div class="text-sm text-text-secondary">
                      0.5MB · 2023-04-10
                    </div>
                  </div>
                </div>
                <button
                  class="text-text-secondary hover:text-primary transition-colors duration-200"
                >
                  <i class="fas fa-download text-xl"> </i>
                </button>
              </div>
              <div
                class="bg-white rounded-lg card-shadow p-4 flex items-center justify-between hover:bg-neutral/50 transition-colors duration-200 cursor-pointer"
              >
                <div class="flex items-center">
                  <div
                    class="w-10 h-10 rounded bg-gray-100 flex items-center justify-center text-gray-500 mr-4"
                  >
                    <i class="fas fa-file-video text-xl"> </i>
                  </div>
                  <div>
                    <div class="font-medium">产品功能演示视频.mp4</div>
                    <div class="text-sm text-text-secondary">
                      28.6MB · 2023-06-20
                    </div>
                  </div>
                </div>
                <button
                  class="text-text-secondary hover:text-primary transition-colors duration-200"
                >
                  <i class="fas fa-download text-xl"> </i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- 抽屉底部 -->
        <div class="p-6 border-t border-neutral-dark bg-white sticky bottom-0">
          <div class="flex space-x-3">
            <button class="btn-outline flex-1">
              <i class="fas fa-share-alt mr-2"> </i>
              分享产品
            </button>
            <button class="btn-secondary flex-1">
              <i class="fas fa-star-o mr-2"> </i>
              收藏
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加产品弹窗 -->
    <div
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
      id="product-modal"
    >
      <div
        class="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"
      >
        <div
          class="p-5 border-b border-neutral-dark flex justify-between items-center sticky top-0 bg-white z-10"
        >
          <h3 class="text-lg font-semibold">添加产品</h3>
          <button
            class="text-text-secondary hover:text-text-primary transition-colors duration-200"
            id="close-product-modal"
          >
            <i class="fas fa-times text-xl"> </i>
          </button>
        </div>
        <div class="p-5" data-selectorname="#id-idvid" style>
          <form data-ytextravalue="extra-vut7gu4jx" id="product-form" style>
            <div
              class="grid grid-cols-2 gap-4 mb-4"
              data-ytindex="0"
              data-ytoriginindex="0"
              style
              data-selectorname="#id-ir1tt"
            >
              <div style>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品名称
                  <span class="text-red-500" style> * </span>
                </label>
                <input
                  class="input-field"
                  placeholder="请输入产品名称"
                  required
                  type="text"
                  style
                />
              </div>
              <div style>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品编号
                  <span class="text-red-500"> * </span>
                </label>
                <input
                  class="input-field"
                  placeholder="例如：PRO-2023001"
                  required
                  type="text"
                  style
                />
              </div>
            </div>
            <div
              class="grid grid-cols-2 gap-4 mb-4"
              data-ytindex="1"
              data-ytoriginindex="1"
              data-selectorname="#id-1hpia"
              style
            >
              <div style>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品分类
                  <span class="text-red-500"> * </span>
                </label>
                <select class="input-field" required style>
                  <option value>请选择分类</option>
                  <option value="software">软件产品</option>
                  <option value="hardware">硬件设备</option>
                  <option value="service">服务套餐</option>
                </select>
              </div>
              <div style>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  供应商
                </label>
                <select class="input-field" required style>
                  <option value>请选择供应商</option>
                  <option value="1">科技软件有限公司</option>
                  <option value="2">硬件设备制造公司</option>
                  <option value="3">云服务提供商</option>
                  <option value="4">企业解决方案公司</option>
                  <option value="new">+ 添加新供应商</option>
                </select>
              </div>
            </div>
            <div class="grid grid-cols-2 gap-4 mb-4">
              <div>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                >
                  主营市场
                  <span class="text-red-500"> * </span>
                </label>
                <select class="input-field" required>
                  <option value>请选择主营市场</option>
                  <option value="large-enterprise">大型企业</option>
                  <option value="medium-enterprise">中型企业</option>
                  <option value="small-enterprise">小型企业</option>
                  <option value="startup">初创企业</option>
                  <option value="government">政府机构</option>
                </select>
              </div>
              <div>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  销售额
                  <span class="text-red-500"> * </span>
                </label>
                <input
                  class="input-field"
                  min="0"
                  placeholder="0.00"
                  required
                  step="0.01"
                  type="number"
                  style
                />
              </div>
            </div>
            <div
              class="mb-4"
              data-ytindex="2"
              data-ytoriginindex="6"
              data-ytparentvalue="extra-vut7gu4jx"
              style="opacity: 1; color: rgb(29, 33, 41); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;"
              data-selectorname="#id-xg1db"
            >
              <label
                class="block text-sm font-medium text-text-secondary mb-1"
                style
              >
                产品类型
              </label>
              <div class="flex space-x-4 mt-2" style>
                <label class="inline-flex items-center cursor-pointer">
                  <input
                    checked
                    class="text-primary focus:ring-primary"
                    name="product-type"
                    type="radio"
                    value="new"
                  />
                  <span class="ml-2 text-sm"> 新产品 </span>
                </label>
                <label class="inline-flex items-center cursor-pointer">
                  <input
                    class="text-primary focus:ring-primary"
                    name="product-type"
                    type="radio"
                    value="old"
                  />
                  <span class="ml-2 text-sm" style> 老产品 </span>
                </label>
              </div>
            </div>
            <div class="mb-4">
              <label class="block text-sm font-medium text-text-secondary mb-1">
                类型
                <span class="text-red-500"> * </span>
              </label>
              <div class="grid grid-cols-3 gap-3 mt-2">
                <label
                  class="border border-neutral-dark rounded-md px-4 py-2 text-center cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors duration-200"
                >
                  <input
                    type="radio"
                    name="product-category"
                    value="profit"
                    class="text-primary focus:ring-primary"
                    required
                  />
                  <span class="ml-2"> 利润 </span>
                </label>
                <label
                  class="border border-neutral-dark rounded-md px-4 py-2 text-center cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors duration-200"
                >
                  <input
                    type="radio"
                    name="product-category"
                    value="traffic"
                    class="text-primary focus:ring-primary"
                  />
                  <span class="ml-2"> 流量 </span>
                </label>
                <label
                  class="border border-neutral-dark rounded-md px-4 py-2 text-center cursor-pointer hover:border-primary hover:bg-primary/5 transition-colors duration-200"
                >
                  <input
                    type="radio"
                    name="product-category"
                    value="core"
                    class="text-primary focus:ring-primary"
                  />
                  <span class="ml-2"> 核心 </span>
                </label>
              </div>
            </div>
            <div
              class="mb-4"
              data-ytindex="3"
              data-ytoriginindex="7"
              data-ytparentvalue="extra-vut7gu4jx"
              style="opacity: 1; color: rgb(29, 33, 41); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;"
              data-selectorname="#id-okzog"
            >
              <label
                class="block text-sm font-medium text-text-secondary mb-1"
                style
              >
                产品标签
              </label>
              <div class="flex flex-wrap gap-2 mt-2" style>
                <div
                  class="inline-flex items-center bg-primary/10 text-primary px-3 py-1 rounded-full text-sm"
                >
                  热门
                  <button class="ml-2 text-primary/70 hover:text-primary">
                    <i class="fas fa-times-circle"> </i>
                  </button>
                </div>
                <div
                  class="inline-flex items-center bg-primary/10 text-primary px-3 py-1 rounded-full text-sm"
                  style
                >
                  新品
                  <button class="ml-2 text-primary/70 hover:text-primary" style>
                    <i class="fas fa-times-circle" style> </i>
                  </button>
                </div>
                <div
                  class="inline-flex items-center border border-dashed border-neutral-dark px-3 py-1 rounded-full text-sm text-text-secondary hover:border-primary hover:text-primary cursor-pointer"
                  style
                >
                  + 添加标签
                </div>
              </div>
            </div>
            <div
              class="grid grid-cols-2 gap-4 mb-4"
              data-ytindex="4"
              data-ytoriginindex="2"
              data-selectorname="#id-b7x3z"
              style
            >
              <div style>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品价格(元)
                  <span class="text-red-500"> * </span>
                </label>
                <input
                  class="input-field"
                  min="0"
                  placeholder="0.00"
                  required
                  step="0.01"
                  type="number"
                  style
                />
              </div>
              <div></div>
            </div>
            <div
              class="mb-4"
              data-ytindex="5"
              data-ytoriginindex="3"
              data-selectorname="#id-ghj61"
              style
            >
              <label
                class="block text-sm font-medium text-text-secondary mb-1"
                style
              >
                产品图片
                <span class="text-red-500"> * </span>
              </label>
              <div
                class="border-2 border-dashed border-neutral-dark rounded-md p-6 text-center hover:border-primary transition-colors duration-200 cursor-pointer"
                style
              >
                <i
                  class="fas fa-cloud-upload-alt text-3xl text-text-tertiary mb-2"
                >
                </i>
                <p class="text-text-secondary mb-1" style>
                  点击或拖拽文件至此处上传
                </p>
                <p class="text-xs text-text-tertiary">
                  支持JPG、PNG格式，建议尺寸800x800px
                </p>
              </div>
            </div>
            <div
              class="mb-4"
              data-ytindex="6"
              data-ytoriginindex="4"
              data-ytextravalue="extra-l5w5of86g"
            >
              <label
                class="block text-sm font-medium text-text-secondary mb-1"
                data-ytparentvalue="extra-l5w5of86g"
                data-ytoriginindex="0"
                data-ytindex="0"
              >
                保存
              </label>
              <textarea
                class="input-field"
                placeholder="请输入产品详细描述"
                rows="3"
                data-selectorname="#id-wlooa"
                style
              >
              </textarea>
            </div>
            <div
              class="grid grid-cols-2 gap-4 mb-4"
              data-ytindex="7"
              data-ytoriginindex="5"
              data-ytparentvalue="extra-vut7gu4jx"
              style="opacity: 1; color: rgb(29, 33, 41); font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; font-style: normal; line-height: 24px; text-align: start; text-indent: 0px;"
              data-selectorname="#id-njrtt"
            >
              <div style>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  产品状态
                  <span class="text-red-500"> * </span>
                </label>
                <select class="input-field" required style>
                  <option value="on_sale">在售</option>
                  <option value="pre_sale">预售</option>
                  <option value="out_of_stock">缺货</option>
                  <option value="discontinued">已停产</option>
                </select>
              </div>
              <div style>
                <label
                  class="block text-sm font-medium text-text-secondary mb-1"
                  style
                >
                  最低起订量
                </label>
                <input
                  class="input-field"
                  min="1"
                  placeholder="1"
                  step="1"
                  style
                  type="number"
                  value="1"
                />
              </div>
            </div>
          </form>
        </div>
        <div
          class="p-5 border-t border-neutral-dark flex justify-end space-x-3 sticky bottom-0 bg-white"
          data-ytextravalue="extra-nqw5u574w"
        >
          <button
            class="btn-outline px-6"
            id="cancel-product-btn"
            data-ytoriginindex="0"
            data-ytindex="0"
          >
            取消
          </button>
          <button
            class="btn-primary px-6"
            id="save-product-btn"
            data-ytparentvalue="extra-nqw5u574w"
            data-ytoriginindex="1"
            data-ytindex="1"
          >
            保存
          </button>
        </div>
      </div>
    </div>
    <!-- 联系供应商弹窗 -->
    <div
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
      id="contact-modal"
    >
      <div
        class="bg-white rounded-lg w-full max-w-md max-h-[90vh] overflow-y-auto"
      >
        <div
          class="p-5 border-b border-neutral-dark flex justify-between items-center sticky top-0 bg-white z-10"
        >
          <h3 class="text-lg font-semibold">联系供应商</h3>
          <button
            class="text-text-secondary hover:text-text-primary transition-colors duration-200"
            id="close-contact-modal"
          >
            <i class="fas fa-times text-xl"> </i>
          </button>
        </div>
        <div class="p-5">
          <div class="flex items-center mb-6">
            <img
              alt="供应商logo"
              class="w-14 h-14 rounded-full object-cover mr-4"
              src="https://design.gemcoder.com/staticResource/echoAiSystemImages/793dd9084e5cbe25f78bdbd1d8dc5406.png"
            />
            <div>
              <div class="font-medium text-lg">科技软件有限公司</div>
              <div class="text-sm text-text-secondary mt-1">软件产品供应商</div>
              <div class="mt-2 flex space-x-2">
                <span class="badge badge-success"> 合作中 </span>
                <span class="badge badge-purple"> 6个产品 </span>
              </div>
            </div>
          </div>
          <div class="space-y-4 mb-6">
            <div class="flex items-start p-3 bg-neutral rounded-md">
              <i class="fas fa-user text-primary mt-1 mr-3 w-5 text-center">
              </i>
              <div>
                <div class="font-medium">王经理</div>
                <div class="text-sm text-text-secondary">销售总监</div>
              </div>
            </div>
            <div class="flex items-start p-3 bg-neutral rounded-md">
              <i class="fas fa-phone text-primary mt-1 mr-3 w-5 text-center">
              </i>
              <div>
                <div class="font-medium">138-0000-1234</div>
                <div class="text-sm text-text-secondary">工作电话</div>
              </div>
            </div>
            <div class="flex items-start p-3 bg-neutral rounded-md">
              <i class="fas fa-envelope text-primary mt-1 mr-3 w-5 text-center">
              </i>
              <div>
                <div class="font-medium">wang@techsoft.com</div>
                <div class="text-sm text-text-secondary">工作邮箱</div>
              </div>
            </div>
            <div class="flex items-start p-3 bg-neutral rounded-md">
              <i
                class="fas fa-map-marker-alt text-primary mt-1 mr-3 w-5 text-center"
              >
              </i>
              <div>
                <div class="font-medium">北京市海淀区科技园区88号</div>
                <div class="text-sm text-text-secondary">公司地址</div>
              </div>
            </div>
            <div class="flex items-start p-3 bg-neutral rounded-md">
              <i class="fas fa-clock text-primary mt-1 mr-3 w-5 text-center">
              </i>
              <div>
                <div class="font-medium">周一至周五 9:00-18:00</div>
                <div class="text-sm text-text-secondary">工作时间</div>
              </div>
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-text-secondary mb-2">
              发送消息
            </label>
            <textarea
              class="input-field"
              placeholder="请输入您要发送的消息内容..."
              rows="3"
            >
            </textarea>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-text-secondary mb-2">
              添加附件
            </label>
            <div
              class="border-2 border-dashed border-neutral-dark rounded-md p-4 text-center hover:border-primary transition-colors duration-200 cursor-pointer"
            >
              <i class="fas fa-paperclip text-xl text-text-tertiary mb-1"> </i>
              <p class="text-text-secondary text-sm">点击添加附件</p>
            </div>
          </div>
        </div>
        <div
          class="p-5 border-t border-neutral-dark flex justify-end space-x-3 sticky bottom-0 bg-white"
        >
          <button class="btn-outline px-6" id="cancel-contact-btn">取消</button>
          <button class="btn-primary px-6" id="send-message-btn">
            发送消息
          </button>
        </div>
      </div>
    </div>
    <script>
      // 页面加载时初始化
              document.addEventListener('DOMContentLoaded', () => {
                  // 菜单切换功能
                  const menuItems = document.querySelectorAll('.menu-item[data-menu]');
                  menuItems.forEach(item => {
                      item.addEventListener('click', () => {
                          // 移除所有菜单的活动状态
                          document.querySelectorAll('.menu-item').forEach(menu => {
                              menu.classList.remove('menu-item-active');
                          });

                          // 添加当前菜单的活动状态
                          item.classList.add('menu-item-active');

                          const menuId = item.getAttribute('data-menu');
                          const submenu = document.getElementById(`submenu-${menuId}`);
                          const icon = item.querySelector('i:last-child');

                          // 切换子菜单显示/隐藏
                          if (submenu.classList.contains('hidden')) {
                              submenu.classList.remove('hidden');
                              icon.classList.remove('fa-chevron-right');
                              icon.classList.add('fa-chevron-down');
                          } else {
                              submenu.classList.add('hidden');
                              icon.classList.remove('fa-chevron-down');
                              icon.classList.add('fa-chevron-right');
                          }
                      });
                  });

                  // 子菜单切换功能
                  const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
                  submenuItems.forEach(item => {
                      item.addEventListener('click', () => {
                          // 移除所有子菜单的活动状态
                          document.querySelectorAll('.submenu-item').forEach(submenu => {
                              submenu.classList.remove('submenu-item-active');
                          });

                          // 添加当前子菜单的活动状态
                          item.classList.add('submenu-item-active');

                          // 获取页面ID和面包屑信息
                          const pageId = item.getAttribute('data-page');
                          const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                          const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                          const currentMenuText = item.querySelector('span').textContent;

                          // 更新面包屑
                          document.getElementById('breadcrumb').innerHTML = `















      <span>${parentMenuText}</span>
        <i class="fas fa-angle-right mx-2 text-xs">
        </i>
        <span>${currentMenuText}</span>















        `;

                          // 切换页面显示
                          document.querySelectorAll('.page').forEach(page => {
                              page.classList.add('hidden');
                          });
                          document.getElementById(`page-${pageId}`).classList.remove('hidden');
                      });
                  });

                  // 侧边栏切换功能
                  const toggleSidebar = document.getElementById('toggle-sidebar');
                  const sidebar = document.getElementById('sidebar');
                  toggleSidebar.addEventListener('click', () => {
                      if (sidebar.classList.contains('w-220')) {
                          sidebar.classList.remove('w-220');
                          sidebar.classList.add('w-20');
                          // 隐藏菜单文本
                          document.querySelectorAll('.menu-item span:first-of-type').forEach(text => {
                              text.classList.add('hidden');
                          });
                          document.querySelectorAll('.submenu').forEach(submenu => {
                              submenu.classList.add('hidden');
                          });
                          document.querySelectorAll('.menu-item i:last-child').forEach(icon => {
                              icon.classList.add('hidden');
                          });
                      } else {
                          sidebar.classList.remove('w-20');
                          sidebar.classList.add('w-220');
                          // 显示菜单文本
                          document.querySelectorAll('.menu-item span:first-of-type').forEach(text => {
                              text.classList.remove('hidden');
                          });
                          // 恢复之前打开的子菜单
                          document.querySelectorAll('.menu-item-active').forEach(menu => {
                              const menuId = menu.getAttribute('data-menu');
                              const submenu = document.getElementById(`submenu-${menuId}`);
                              if (submenu) {
                                  submenu.classList.remove('hidden');
                              }
                          });
                          document.querySelectorAll('.menu-item i:last-child').forEach(icon => {
                              icon.classList.remove('hidden');
                          });
                      }
                  });

                  // 添加产品弹窗功能
                  const addProductBtn = document.getElementById('add-product-btn');
                  const productModal = document.getElementById('product-modal');
                  const closeProductModal = document.getElementById('close-product-modal');
                  const cancelProductBtn = document.getElementById('cancel-product-btn');
                  const saveProductBtn = document.getElementById('save-product-btn');

                  addProductBtn.addEventListener('click', () => {
                      productModal.classList.remove('hidden');
                      // 阻止背景滚动
                      document.body.style.overflow = 'hidden';
                  });

                  function closeProductModalFunc() {
                      productModal.classList.add('hidden');
                      // 恢复背景滚动
                      document.body.style.overflow = '';
                  }

                  closeProductModal.addEventListener('click', closeProductModalFunc);
                  cancelProductBtn.addEventListener('click', closeProductModalFunc);

                  saveProductBtn.addEventListener('click', () => {
                      // 这里添加表单提交逻辑
                      alert('产品添加成功！');
                      closeProductModalFunc();
                  });

                  // 点击模态框外部关闭
                  productModal.addEventListener('click', (e) => {
                      if (e.target === productModal) {
                          closeProductModalFunc();
                      }
                  });

                  // 联系供应商弹窗功能
                  const contactButtons = document.querySelectorAll('.contact-supplier, .contact-supplier-drawer');
                  const contactModal = document.getElementById('contact-modal');
                  const closeContactModal = document.getElementById('close-contact-modal');
                  const cancelContactBtn = document.getElementById('cancel-contact-btn');
                  const sendMessageBtn = document.getElementById('send-message-btn');

                  contactButtons.forEach(button => {
                      button.addEventListener('click', () => {
                          contactModal.classList.remove('hidden');
                          // 阻止背景滚动
                          document.body.style.overflow = 'hidden';
                      });
                  });

                  function closeContactModalFunc() {
                      contactModal.classList.add('hidden');
                      // 恢复背景滚动
                      document.body.style.overflow = '';
                  }

                  closeContactModal.addEventListener('click', closeContactModalFunc);
                  cancelContactBtn.addEventListener('click', closeContactModalFunc);

                  sendMessageBtn.addEventListener('click', () => {
                      // 这里添加发送消息逻辑
                      alert('消息发送成功！');
                      closeContactModalFunc();
                  });

                  // 点击模态框外部关闭
                  contactModal.addEventListener('click', (e) => {
                      if (e.target === contactModal) {
                          closeContactModalFunc();
                      }
                  });

                  // 产品详情抽屉功能
                  const productDetailDrawer = document.getElementById('product-detail-drawer');
                  const previewButtons = document.querySelectorAll('.preview-product');
                  const closeDrawerBtn = document.getElementById('close-drawer-btn');

                  // 打开抽屉
                  previewButtons.forEach(button => {
                      button.addEventListener('click', () => {
                          const productId = button.getAttribute('data-product-id');
                          const productRow = button.closest('.table-row');

                          // 填充抽屉内容
                          document.getElementById('drawer-product-title').textContent = productRow.getAttribute('data-product-name');
                          document.getElementById('drawer-product-image').src = productRow.querySelector('img').src.replace('width=80&height=80', 'width=400&height=300');
                          document.getElementById('drawer-product-category').textContent = productRow.getAttribute('data-product-category');
                          document.getElementById('drawer-product-type').textContent = productRow.getAttribute('data-product-type');
                          document.getElementById('drawer-product-price').textContent = `¥${parseInt(productRow.getAttribute('data-product-price')).toLocaleString()}`;

                          // 获取产品其他信息
                          const cells = productRow.querySelectorAll('td');
                          document.getElementById('drawer-product-region').textContent = cells[5].textContent;
                          document.getElementById('drawer-product-market').textContent = cells[6].textContent;
                          document.getElementById('drawer-product-status').textContent = cells[8].querySelector('span').textContent;
                          document.getElementById('drawer-product-code').textContent = productRow.querySelector('td:nth-child(4) .text-sm').textContent;

                          // 显示抽屉
                          productDetailDrawer.classList.remove('translate-x-full');
                          // 阻止背景滚动
                          document.body.style.overflow = 'hidden';
                      });
                  });

                  // 关闭抽屉
                  closeDrawerBtn.addEventListener('click', () => {
                      productDetailDrawer.classList.add('translate-x-full');
                      // 恢复背景滚动
                      document.body.style.overflow = '';
                  });

                  // 点击抽屉外部关闭
                  productDetailDrawer.addEventListener('click', (e) => {
                      if (e.target === productDetailDrawer) {
                          productDetailDrawer.classList.add('translate-x-full');
                          document.body.style.overflow = '';
                      }
                  });

                  // 产品详情标签页切换
                  const detailTabs = document.querySelectorAll('.detail-tab');
                  const detailContents = document.querySelectorAll('.detail-content');

                  detailTabs.forEach(tab => {
                      tab.addEventListener('click', () => {
                          const tabId = tab.getAttribute('data-tab');

                          // 移除所有标签的活动状态
                          detailTabs.forEach(t => {
                              t.classList.remove('active', 'border-primary', 'text-primary');
                              t.classList.add('border-transparent', 'text-text-secondary');
                          });

                          // 添加当前标签的活动状态
                          tab.classList.add('active', 'border-primary', 'text-primary');

                          // 隐藏所有内容
                          detailContents.forEach(content => {
                              content.classList.add('hidden');
                              content.classList.remove('active');
                          });

                          // 显示当前内容
                          document.getElementById(`tab-${tabId}`).classList.remove('hidden');
                          document.getElementById(`tab-${tabId}`).classList.add('active');
                      });
                  });

                  // 产品类型选择
                  const productTypeRadios = document.querySelectorAll('input[name="product-age"]');
                  productTypeRadios.forEach(radio => {
                      radio.addEventListener('change', () => {
                          // 移除所有选项的选中样式
                          document.querySelectorAll('input[name="product-age"]').forEach(r => {
                              const label = r.closest('label');
                              label.classList.remove('border-primary', 'bg-primary/10', 'text-primary');
                              label.classList.add('border-neutral-dark', 'hover:border-primary', 'hover:bg-primary/5');
                          });

                          // 添加当前选项的选中样式
                          const activeLabel = radio.closest('label');
                          activeLabel.classList.remove('border-neutral-dark', 'hover:border-primary', 'hover:bg-primary/5');
                          activeLabel.classList.add('border-primary', 'bg-primary/10', 'text-primary');

                          // 这里可以添加筛选产品的逻辑
                          console.log('筛选产品类型:', radio.value);
                      });
                  });
              });
    </script>
  </body>
</html>
